<template>
  <Dialog :title="comInfo.name" :show="true" @close="cancel" :width="300" height="auto" :left="uiLeft" :top="60">
    <div class="box" @click="whiteSpaceClick">
      <div class="item1">
        <div>是否编辑：</div>
        <div class="edit">
          <el-switch v-model="editingRef" size="small" />
          <el-button @click.stop="draw"> 重新绘制</el-button>
        </div>
      </div>
      <div class="item1">
        <div class="key">名称:</div>
        <el-input v-model.lazy="name" placeholder="请输入名称" />
      </div>
      <div class="item1">
        <div class="key">最低高程:</div>
        <el-input v-model.lazy="bottom" :disabled="true" type="number" />
      </div>
      <div class="item2">
        <div class="key"></div>
        <div>
          <!-- <el-button @click.stop="flat">纯平</el-button> -->
          <el-button @click.stop="offset">偏移</el-button>
        </div>
      </div>
      <div class="item2" v-show="showSlider">
        <div class="key"></div>
        <div class="fuc">
          <el-slider v-model="offsetVal" @input="offsetChange" :min="-10" :max="10" :step="0.1" :show-tooltip="true"
            style="width: 170px" />
        </div>
      </div>
      <div class="item1">
        <div class="key">柱体高度:</div>
        <el-input type="number" v-model="ceilling" placeholder="请输入高度" min="" />
      </div>
      <div class="btn1">
        <el-button @click="submit" :disabled="!name ||
    !eSGeoExtrudedPolygonUFMS ||
    eSGeoExtrudedPolygonUFMS.editing ||
    !eSGeoExtrudedPolygonUFMS.points ||
    !eSGeoExtrudedPolygonUFMS.points.length
    ">创建</el-button>
      </div>
    </div>
  </Dialog>
  <DialogCom v-if="currentDialog" :draggable="true" title="设单体化属性" :width="'420'" :visible="true"
    @close="currentDialog = false" @confirm="submitConfirm">
    <template v-slot:content>
      <div class="box">
        <el-table :data="monomerPropertyRef" border :cell-style="cellStyle2" :header-cell-style="cellStyleSmall"
          :highlight-current-row="false" :max-height="180">
          <el-table-column prop="key" label="字段" :show-overflow-tooltip="true" width="100" />
          <el-table-column prop="value" label="值" :show-overflow-tooltip="true" width="auto">
            <template #default="scope">
              <div>
                <div v-if="scope.row.type == 'String' || scope.row.type == 'Json' || scope.row.type == 'Time'">
                  <el-input type="text" v-model.lazy="scope.row.value" @change="edit(scope.row)" />
                </div>
                <div v-else-if="scope.row.type === 'Boolean'">
                  <el-switch v-model="scope.row.value" size="small" @change="edit(scope.row)" />
                </div>
                <div
                  v-else-if="scope.row.type === 'Int8' || scope.row.type == 'Int16' || scope.row.type == 'Int32' || scope.row.type == 'Int64' || scope.row.type == 'Float' || scope.row.type == 'Double'">
                  <el-input-number v-model="scope.row.value" controls-position="right" :precision="3"
                    @change="edit(scope.row)" />
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>

      </div>
    </template>
  </DialogCom>
</template>
<script setup lang="ts">
import {
  createVueDisposer,
  toVR,
} from "vue-xe2-plugin/dist-node/components/xe2/tools";
import Dialog from "../../components/Dialog.vue";
import { onBeforeUnmount, ref, onMounted, computed, watch } from "vue";
import { getProjectManager } from "../../scripts/getProjectManager";
import TooltipCom from "@/components/common/TooltipCom.vue";
import { ESGeoExtrudedPolygonUFMS } from "@/scripts/esobjs/ESGeoExtrudedPolygonUFMS";
import { getsceneObjNumfromSceneTree, processNum } from "@/scripts/utils";
import DialogCom from "@/components/common/DialogCom.vue";
import { cellStyle2, cellStyleSmall } from "@/scripts/tableStyle";

const props = withDefaults(defineProps<{ comInfo: any }>(), {});
const uiLeft = ref(document.body.clientWidth - 10 - 300);

const emits = defineEmits(["cancel"]);
const cancel = () => {
  emits("cancel", props.comInfo.id);
};

const d = createVueDisposer(onBeforeUnmount);

const objm = getProjectManager();
const modelser2Manager = objm.modelser2Manager;
const modelser2SceneTreeWrapper = objm.modelser2SceneTreeWrapper;
const modelserManager = getProjectManager().modelserManager;
const monomerEdit = modelser2Manager.monomerEdit as any;

const editPolygon = modelserManager.editPolygon;

let eSGeoExtrudedPolygonUFMS: any = ref("");
let editingRef = ref(false);

const create = () => {
  eSGeoExtrudedPolygonUFMS.value = d.ad(
    objm.createSceneObject(ESGeoExtrudedPolygonUFMS) as ESGeoExtrudedPolygonUFMS
  );
  d.dispose(() => {
    eSGeoExtrudedPolygonUFMS.value.editing = false;
    eSGeoExtrudedPolygonUFMS.value &&
      objm.destroySceneObject(eSGeoExtrudedPolygonUFMS.value);
  });
  eSGeoExtrudedPolygonUFMS.value.fillColor = [1, 0, 0, 0.5];
  eSGeoExtrudedPolygonUFMS.value.absoluteBottom = true;
  eSGeoExtrudedPolygonUFMS.value.absoluteCeilling = true;

  editingRef.value = true;

  eSGeoExtrudedPolygonUFMS.value.dispose(
    eSGeoExtrudedPolygonUFMS.value.pointsChanged.disposableOn((e: any) => {
      bottom.value = processNum(editPolygon.getMinHeight(eSGeoExtrudedPolygonUFMS.value.points));
      eSGeoExtrudedPolygonUFMS.value.ceilling = processNum(Number(ceilling.value) + editPolygon.getMaxHeight(eSGeoExtrudedPolygonUFMS.value.points));
    })
  );
  eSGeoExtrudedPolygonUFMS.value.dispose(
    eSGeoExtrudedPolygonUFMS.value.editingChanged.disposableOn((val: any) => {
      editingRef.value = val;
    })
  );
  updateParam();
};

watch(editingRef, (val) => {
  if (!eSGeoExtrudedPolygonUFMS.value) return;
  eSGeoExtrudedPolygonUFMS.value.editing = val;
});

const bottom = ref(0);
const name = ref("创建单体化");

const ceilling = ref(10);

// 重新绘制
const draw = () => {
  if (eSGeoExtrudedPolygonUFMS.value.editing) {
    eSGeoExtrudedPolygonUFMS.value.editing = false;
  }
  eSGeoExtrudedPolygonUFMS.value.points = [];
  eSGeoExtrudedPolygonUFMS.value.editing = true;
};

// 纯平
const flat = () => {
  eSGeoExtrudedPolygonUFMS.value.points =
    eSGeoExtrudedPolygonUFMS.value.points.map((p: [number, number, number]) => [
      p[0],
      p[1],
      editPolygon.getMinHeight(eSGeoExtrudedPolygonUFMS.value.points),
    ]);
};

// 偏移值
const offsetVal = ref(0);
// 底部高程默认值
const bottomDefault = ref<any>([]);

// 是否显示滑块
const showSlider = ref(false);

// 偏移
const offset = () => {
  offsetVal.value = 0;
  bottomDefault.value = [];
  showSlider.value = true;
  bottomDefault.value = JSON.parse(
    JSON.stringify(eSGeoExtrudedPolygonUFMS.value.points)
  );
};

// 偏移监听
const offsetChange = (val: number) => {
  eSGeoExtrudedPolygonUFMS.value.points =
    eSGeoExtrudedPolygonUFMS.value.points.map(
      (p: [number, number, number], i: number) => [
        p[0],
        p[1],
        bottomDefault.value[i][2] + val,
      ]
    );
};

// 点击空白
const whiteSpaceClick = () => {
  showSlider.value = false;
};

const updateParam = () => {
  eSGeoExtrudedPolygonUFMS.value.bottom = Number(bottom.value);
  eSGeoExtrudedPolygonUFMS.value.ceilling = processNum(Number(ceilling.value) + editPolygon.getMaxHeight(eSGeoExtrudedPolygonUFMS.value.points));
};

// 监听顶面高度模式和变化
watch([bottom, ceilling], () => {
  updateParam();
});

const currentDialog = ref(false);
const monomerPropertyRef = computed(() => {
  return monomerEdit.propertyLists.map((item: any) => {
    return {
      key: item.name,
      type: item.type,
      value: null
    }
  })
})

const changedMonomerPropertyRef = ref<any>({});

const edit = (row: any) => {
  changedMonomerPropertyRef.value[row.key] = row.value
}

// 提交
const submit = async () => {
  await monomerEdit.getMonomerProperty()
  currentDialog.value = true
};

const submitConfirm = async () => {
  const srcGeom = eSGeoExtrudedPolygonUFMS.value.srcGeom;
  const param = {
    tileServiceName: modelser2Manager.eSMsTileset.tileServiceName,
    name: name.value,
    geojson: JSON.stringify(srcGeom),
    minH: eSGeoExtrudedPolygonUFMS.value.bottom,
    maxH: eSGeoExtrudedPolygonUFMS.value.ceilling,
    fileds: {
      ...changedMonomerPropertyRef.value
    }
  };

  await modelser2Manager.createMonomer(param)
  eSGeoExtrudedPolygonUFMS.value.editing = false;
  eSGeoExtrudedPolygonUFMS.value && objm.destroySceneObject(eSGeoExtrudedPolygonUFMS.value);
  create();
  currentDialog.value = false;
}

onMounted(() => {
  create();
});
</script>

<style scoped>
.box {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.item1 {
  display: grid;
  grid-template-columns: 95px 1fr;
  align-items: center;
  margin-bottom: 8px;
}

.item2 {
  display: grid;
  grid-template-columns: 95px 1fr;
  align-items: center;
}

.fuc {
  display: flex;
}

.btn1 {
  display: flex;
  justify-content: flex-end;
  /* justify-content: space-between; */
}

.el-button {
  margin-left: 0px !important;
}

.edit {
  display: flex;
  gap: 20px;
  align-items: center;
}

.el-input-number {
  width: 150px;
  height: 25px;
  text-align: left;
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover>td) {
  background-color: transparent !important;
  color: #333 !important;

}

:deep(.el-input-number .el-input__inner) {
  text-align: left !important;
}

:deep(.el-input-number.is-controls-right .el-input__wrapper) {
  padding-left: 11px;
}


:deep(.el-input-number.is-controls-right .el-input-number__increase,
  .el-input-number.is-controls-right .el-input-number__decrease,
  .el-input-number.is-controls-right .el-input-number__increase) {
  --el-input-number-controls-height: 11px !important;
  height: 11px !important;
}

.el-input {
  width: 150px;
  height: 25px;
}
</style>
